<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<!--
        v-bind:src="img"
        :src="img"
-->
<div id="app">
    <img :src="img" width="300"> <br>
    <button @click="pre">上一张</button>
    <button @click="next">下一张</button>
</div>

<script>

    const vm = new Vue({
        el: '#app',
        data: {
            index: 0,
            img:'../img/1.png',
            images: ["../img/1.png", "../img/2.png", "../img/3.png"]
        },
        methods: {
            pre() {

                this.index--
                if ( this.index<0){
                    this.index = 2
                }

                this.img = this.images[this.index]
            },
            next() {
                this.index++
                if ( this.index==3){
                    this.index = 0
                }

                this.img = this.images[this.index]
            }

        }
    })

</script>
</body>
</html>
